<template>
  <div class="mqtt-edit">
    <el-tabs tab-position="left" class="mqtt-tab">
      <el-tab-pane label="台站信息">
       <station-info 
        :options="options" 
        :config="{
          stationData:devinceConfig.stationData
        }"
        :params="{
          id:data.id,
          targetType:'device'
        }"
        style="height: 100%;"/>
      </el-tab-pane> 
      <el-tab-pane label="通道配置">
        <Passageway
         :options="options"
         :params="{
            id:data.id,
            targetType:'device'
          }"
         :config="{
          passageways:devinceConfig.passageways
         }"
       />
      </el-tab-pane>
      
      <el-tab-pane label="网络配置">
        <network 
          :options="options"  
          :params="{
              id:data.id,
              targetType:'device'
          }"
          :config="{
            ftpConfig:devinceConfig.ftpConfig,
            mqttConfig:devinceConfig.mqttConfig,
            ftpLogConfig:devinceConfig.ftpLogConfig,
            updateConfig:devinceConfig.updateConfig
          }"/>
      </el-tab-pane>
      <el-tab-pane label="震级阈值(mg)">
        <Threshold 
         :options="options" 
          :config="{
            threshold:devinceConfig.threshold
          }"
          :params="{
            id:data.id,
            targetType:'device'
          }"
        />
      </el-tab-pane>
      <el-tab-pane label="NTP配置">
        <ntp :options="options" 
         :config="{
          ntp:devinceConfig.ntp
         }"
           :params="{
            id:data.id,
            targetType:'device'
          }"
        />
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script setup lang="ts">
  import Network from './Network.vue'
  import StationInfo from './StationInfo.vue'
  import Threshold from './Threshold.vue'
  import Passageway from './Passageway.vue'
  import Ntp from './Ntp.vue'
  import {onMounted,ref} from 'vue'
  import {getDeviceConfig} from '@/api/site'
  let emits = defineEmits(['close']);

  const options = {
    labelPosition: 'right',
    size: 'default',
    formClass: 'mqtt-form',
    inline: true,
    buttonColor: '#3aecff'
  }

  const props = defineProps({
    data: {
      type:Object,
      default:{}
    }
  })

 // 对象的要素定义对象类型报错
 interface  configType  {
    [propsName:string]:any
    // ftpConfig:object,
    // mqttConfig:object,
    // logConfig:object,
    // updateConfig:object,
    // ntpData:object,
    // stationData:object,
    // thresholData:object
  }
  let devinceConfig:configType = ref({
    // ftpConfig:{},
    // mqttConfig:{},
    // logConfig:{},
    // updateConfig:{},
    // ntp:{},
    // stationData:{},
    // thresholData:{},
    // passageways:[]
  })
  const getDevinceConfig = ()=>{
    getDeviceConfig({id:props.data.id }).then(res=>{
      if(res.code===200){
        devinceConfig.value = res.data
      }
    })
  }
  onMounted(()=>{
    getDevinceConfig()
  })
  const onClose = () => {
    emits('close', true)
  }
</script>

<style lang="scss">
  @import '@/assets/styles/theme';

  .el-popper.is-light {
    background: $select-background !important;
    border: 1px solid $table-border-color !important;
  }

  .el-select-dropdown__option-item {
    color: $select-color;
  }

  .el-select-dropdown__option-item.is-selected {
    color: $select-color-selected !important;
    background: $select-background-selected !important;
  }

  .el-popper.is-light .el-popper__arrow::before {
    background: rgba(0, 63, 63, .8);
  }

  .el-select-dropdown__item.selected {
    color: $select-color-selected;
  }

  .el-select-dropdown__item {
    color: $select-color;
  }

  .el-select-dropdown__item.hover, .el-select-dropdown__item:hover {
    background: $select-background-selected !important;
  }

  .el-select-dropdown__option-item.hover {
    background: $select-background-selected !important;
  }


  .mqtt-edit {
    .form-item {
      border-radius: 10px;
      background: rgba(7, 87, 84, 0.55);
      margin: 10px;
      padding: 10px;
      box-shadow: 2px 2px 8px 1px #001e1e;

      .title {
        color: #17def3;
        text-align: left;
        font-size: 15px;
        margin-bottom: 20px;
        text-shadow: 0 0 2px #17def3;
      }
    }

    .submit-button {
      width: calc(100% - 20px);
      margin-top: 10px;
      margin-left: 10px;
    }

    .mqtt-form {
      height: 100%;
      box-sizing: content-box;

      .el-form-item {
        width: 100%;

        .el-form-item__label {
          color: $panel-color;
        }

        .el-input {
          --el-input-placeholder-color: #1b9caa;

          .el-input__wrapper {
            background: transparent;
            box-shadow: none;
            border: 1px solid #1b9caa;

            .el-input__inner {
              color: $panel-color;
            }
          }
        }

        .el-select-v2__wrapper {
          background: none;
          border: 1px solid #1b9caa;

          .el-select-v2__placeholder {
            color: $panel-color;
          }
        }

      }
    }

    .el-tabs--left .el-tabs__nav-wrap.is-left::after {
      background: #0b5958 !important;
    }

    .mqtt-tab {
      height: 80vh;

      .el-tabs__active-bar {
        background: #00ccff;
      }

      .el-tabs__content {
        height: 100%;
        overflow: auto;

        .el-tab-pane {
          height: 100%;
        }
      }

      .el-tabs__item {
        color: #1b9caa;
      }

      .el-tabs__item.is-active {
        color: $panel-color;
      }
    }
  }
</style>

<style scoped lang="scss">
  @import '@/assets/styles/theme';

  .mqtt-edit {
    padding: 10px;

    .title {
      font-size: 16px;
      line-height: 35px;
      text-shadow: 0 0 2px #03c6c6;
      margin-bottom: 10px;

      .icon {
        float: right;
        margin-right: 5px;
        font-size: 20px;
        cursor: pointer;
      }

      .icon:hover {
        color: #fd8787;
      }
    }
  }
</style>
